<template>
  <div>
    <div class="week">
      <span v-for="item in weekList" :key="item">{{ item }}</span>
    </div>
    <div class="main">
      <div v-for="item in totalDate" :key="item.month" class="year-month">
        <div class="month">{{ item.month.replace('-', '年') }}月</div>
        <div>
          <div class="date">
            <div v-for="item2 in item.list" :key="item2.date" class="day">
              <span>{{ item2.date.substring(item2.date.length - 2) }}</span>
              <div v-if="!item2.timeList" class="time"></div>
              <div v-else-if="item2.timeList.length > 0" class="time">
                <div
                  v-for="item3 in item2.timeList"
                  :key="item3"
                  :class="item3.remainder == 0 ? 'default' : 'active'"
                  @click="selectOrder(item3)"
                >
                  <span :class="item3.remainder == 0 ? 'disabled' : ''">{{
                    item3.remainder == 0
                      ? '已约满'
                      : item3.startTime.substring(11, 16)
                  }}</span>
                </div>
              </div>
              <div v-else class="time">
                <div class="default">
                  <span class="disabled">休息</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import dayjs from 'dayjs'
import { getLaterDate } from '../utils'
import { useRouter } from 'vue-router'
import { publishQuery, getpublishQueryList } from '../api'
import { Reserve } from '../types'

type PropsType = { userId: string; tenantId: string }

const props = defineProps<PropsType>()

const router = useRouter()

// 0-6代表的星期
let week = ['日', '一', '二', '三', '四', '五', '六']

const weekList = getWeekList(week)

let totalDate = ref<any[]>([])

const params = {
  beginDate: getLaterDate(1),
  endDate: getLaterDate(31),
  tenantId: props.tenantId,
  userId: props.userId,
}
getpublishQueryList(params).then((res) => {
  const { list } = getMonthDate(res.data.data, weekList, week)
  totalDate.value = list
})

let user = JSON.parse(localStorage.getItem('fock_user_data')!)

function selectOrder(item: Reserve) {
  if (item.remainder == 0) return
  if (user.authority == '心理专家') return
  router.push({
    name: 'ReserveOrder',
    query: {
      id: item.id,
      tenantId: props.tenantId,
    },
  })
}

//获取后面7天的具体是星期几
function getWeekList(week: string[]) {
  let weekList: string[] = []
  for (let i = 0; i < 7; i++) {
    weekList.push(
      week[
        parseInt(
          dayjs()
            .add(i + 1, 'day')
            .format('d')
        )
      ]
    )
  }
  return weekList
}

//Record<key, value> 显示对象的key和value的数据类型

function getMonthDate(
  data: Record<string, any>,
  weekList: string[],
  week: string[]
) {
  let weeks: any = {}
  let date = Object.keys(data)
  let list: any[] = []
  for (let i in data) {
    if (!weeks[i.substring(0, 7)]) {
      weeks[i.substring(0, 7)] = {
        list: [],
        month: i.substring(0, 7),
      }
      let obj = {
        date: i,
        timeList: data[i],
      }
      let length = 0
      //获取每个月的第一天按照当前日期后7天的星期，排在第几
      weekList.forEach((item, index) =>
        item === week[new Date(i).getDay()] ? (length = index) : ''
      )
      for (let j = 0; j < length; j++) {
        let obj = {
          date: '',
        }
        weeks[i.substring(0, 7)].list.push(obj)
      }
      weeks[i.substring(0, 7)].list.push(obj)
    } else {
      let obj = {
        date: i,
        timeList: data[i],
      }
      weeks[i.substring(0, 7)].list.push(obj)
    }
  }

  for (const key in weeks) {
    list.push(weeks[key])
  }
  return { list, date }
}
</script>

<style lang="less" scoped>
.week {
  display: grid;
  font-size: 13px;
  padding: 10px 5px;
  grid-template-columns: repeat(7, 13%);
  grid-column-gap: 1.4%;

  span {
    text-align: center;
  }
}

.main {
  .year-month {
    .month {
      text-align: center;
      font-size: 14px;
    }

    .date {
      display: grid;
      font-size: 13px;
      padding: 10px 5px;
      grid-template-columns: repeat(7, 13%);
      grid-column-gap: 1.4%;

      .day {
        text-align: center;
        margin-top: 20px;

        > span {
          height: 16px;
          line-height: 16px;
        }

        .time {
          display: flex;
          flex-direction: column;

          div {
            width: 45px;
            height: 45px;
            border-radius: 50%;
            line-height: 45px;
            margin-top: 10px;
          }
        }
      }
    }
  }
}

.active {
  background: rgb(58, 219, 188);
  color: white;
}

.default {
  background: rgb(240, 240, 240);
  color: black;
}

.disabled {
  opacity: 0.4;
  transform: scale(0.85);
  display: inline-block;
}
</style>
